<template>
  <div id="app">
    <div class="row">
      <i class="el-icon-edit"></i>
      <i class="el-icon-share"></i>
      <i class="el-icon-delete"></i>
      <el-button type="primary" icon="el-icon-search">搜索</el-button>
      <el-switch
        active-color="#13ce66"
        inactive-color="#ff4949">
      </el-switch>
      <SearchCostItem
              v-model="form.FeeItemName"
              :name.sync="form.FeeItemName"
              @selectedData="selectedFeeItem"
              :CatId="form.CatId"
              placeholder="选择费用项"
            />
   </div>
   <h1>----------------------------</h1>
   <el-checkbox  v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  <div style="margin: 15px 0;"></div>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
  <h1>----------------------------</h1>
  </div>
</template>

<script>
import SearchCostItem from '../components/searchCostItem.vue'
export default {
  components: {
    SearchCostItem
  },
  data () {
    return {
      list: [
        {
          lineId: 1,
          lineName: '110接处警系统',
          checked: false
        },
        {
          lineId: 2,
          lineName: '12345热线系统',
          checked: false
        },
        {
          lineId: 3,
          lineName: '公安信访综合信息系统',
          checked: true
        },
        {
          lineId: 4,
          lineName: '110信箱系统',
          checked: true
        },
        {
          lineId: 5,
          lineName: '关注人员管控系统（大情报人员布控）',
          checked: true
        },
        {
          lineId: 6,
          lineName: 'CK报警',
          checked: true
        },
        {
          lineId: 7,
          lineName: '电子警察（交警六合一）',
          checked: true
        },
        {
          lineId: 8,
          lineName: '交警现场处罚（交警六合一）',
          checked: true
        },
        {
          lineId: 9,
          lineName: '刑侦反电诈平台',
          checked: true
        },
        {
          lineId: 10,
          lineName: '警综（治安检查）',
          checked: true
        },
        {
          lineId: 11,
          lineName: '网络舆情',
          checked: true
        },
        {
          lineId: 12,
          lineName: '涉网案件线索',
          checked: true
        },
        {
          lineId: 13,
          lineName: '监所深挖',
          checked: true
        },
        {
          lineId: 14,
          lineName: '案综',
          checked: true
        },
        {
          lineId: 15,
          lineName: '新增接报-窗口接报',
          checked: true
        },
        {
          lineId: 16,
          lineName: '新增接报-工作发现',
          checked: true
        },
        {
          lineId: 17,
          lineName: '新增接报-政府移交',
          checked: true
        },
        {
          lineId: 18,
          lineName: '新增接报-神经元感知',
          checked: true
        },
        {
          lineId: 19,
          lineName: '境外人员住宿登记和常住境外人员管理模块',
          checked: true
        },
        {
          lineId: 24,
          lineName: '111',
          checked: true
        },
        {
          lineId: 29,
          lineName: '3w4567',
          checked: true
        },
        {
          lineId: 30,
          lineName: '12',
          checked: true
        },
        {
          lineId: 31,
          lineName: '11',
          checked: true
        },
        {
          lineId: 32,
          lineName: '112',
          checked: true
        },
        {
          lineId: 33,
          lineName: '123',
          checked: true
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      checkAll: false,
      checkedCities: ['上海', '北京'], // 选中得
      cities: ['上海', '北京', '广州', '深圳'], // 全部得
      visible: false,
      form: {
        FeeItemName: '',
        CatId: ''
      }
    }
  },
  methods: {
    handleCheckAllChange (val) {
      console.log('val,val', val)
      console.log(this.checkAll, 'all')
      this.checkedCities = val ? this.cities : []
    },
    handleCheckedCitiesChange (value) {
      console.log(value, 'value')
      const checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
    },
    selectedFeeItem (val) {
      this.form.FeeItemName = val.list.FeeItemCode
      console.log('selectedFeeItem', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.row{
  margin: 25px 5px;
  .l-button {
    margin-left:5px;
  }
}
</style>
